<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <link rel="stylesheet" type="text/css" href="../static/chat/chat.css" />

    <script src="../static/chat/js/jquery.min.js"></script>
    <script src="../static/chat/js/flexible.js"></script>

</head>
<body onload="openSocket()">
<header class="header">
    <a class="back" href="javascript:history.back()"></a>
    <h5 class="tit">${shopName}</h5>
<!--    <div class="right">资料</div>-->
</header>


<p>【userId】：<div><input id="userId" name="userId" type="hidden" value="${myName}"></div>
<p>【toUserId】：<div><input id="toUserId" name="toUserId" type="hidden" value="${shopName}"></div>
<#--<p>【toUserId】：<div><input id="contentText" name="contentText" type="text" value="hello websocket"></div>-->
<#--<p>【操作】：<div><button type="button" onclick="openSocket()" >开启socket</button></div>-->
<#--<p>【操作】：<div><button type="button" onclick="sendMessage()" >发送消息</button></div>-->




</div>


<div class="message">

    <div class="send">
        <div class="time">05/22 06:30</div>
        <div class="msg">
            <img src="../static/chat/images/touxiang.png"  />
            <p><i class="msg_input" ></i>
                欢迎光临👏🏻${shopName}<br>
            <div id="news">
            </p>
        </div>
    </div>
    <div class="show">
        <div class="time">05/22 06:30</div>
        <div class="msg">
            <img src="../static/chat/images/touxiangm.png"  />
            <p><i clas="msg_input"></i>用户${myName?substring(0,1)}**前来咨询</p>
        </div>
    </div>
</div>
<div class="footer">
    <img src="../static/chat/images/hua.png" alt="" />
    <img src="../static/chat/images/xiaolian.png" alt="" />
    <input type="text" name="contentText" id="contentText"/>
    <p onclick="sendMessage()">发送</p>
</div>
</body>
<script src="../static/chat/js/chat.js" type="text/javascript" charset="utf-8"></script>
<script>


</script>

<script>
    var socket;
    function openSocket() {
        if(typeof(WebSocket) == "undefined") {
            setMessageInnerHTML("您的浏览器不支持WebSocket");
        }else{
            // setMessageInnerHTML("您的浏览器支持WebSocket");
            //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
            var socketUrl="http://49.235.177.225:1061/ws/"+$("#userId").val();
            socketUrl=socketUrl.replace("https","ws").replace("http","ws");
            console.log(socketUrl);
            if(socket!=null){
                socket.close();
                socket=null;
            }
            socket = new WebSocket(socketUrl);
            //打开事件
            socket.onopen = function() {
                // setMessageInnerHTML("websocket已打开");
                //socket.send("这是来自客户端的消息" + location.href + new Date());
            };
            //获得消息事件
            socket.onmessage = function(msg) {
                setMessageInnerHTML(msg.data);
                //发现消息进入    开始处理前端触发逻辑
            };
            //关闭事件
            socket.onclose = function() {
                setMessageInnerHTML("websocket已关闭");
            };
            //发生了错误事件
            socket.onerror = function() {
                setMessageInnerHTML("websocket发生了错误");
            }
        }
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML){
        var str1 = eval('(' + innerHTML + ')');
        var content = str1["contentText"]+'【'+new Date().Format("yyyy-MM-dd hh:mm:ss") +'】';
       send("sasa",content)
    }


    function sendMessage() {
        if(typeof(WebSocket) == "undefined") {
            setMessageInnerHTML("您的浏览器不支持WebSocket");
        }else {

            // setMessageInnerHTML("您的浏览器支持WebSocket");
            // setMessageInnerHTML('{"toUserId":"'+$("#toUserId").val()+'","contentText":"'+$("#contentText").val()+'"}');
            socket.send('{"toUserId":"'+$("#toUserId").val()+'","contentText":"'+$("#contentText").val()+'"}');
        }
    }


    Date.prototype.Format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }



    /*更新视图*/
    function upView(html){
        $('.message').append(html);
        $('body').animate({scrollTop:$('.message').outerHeight()-window.innerHeight},200)
    }
</script>

</body>
</html>



